
<script setup>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { getMetadata } from "@/contract/nft";
import {buy, getOrder} from "@/contract/market";
import {useStore} from "@/store";
import ConnectWallet from "@/components/NFT/ConnectWallet.vue";
import {approve} from "@/contract/usdt";
import {market_address} from "@/config/contract";
import {ElMessage} from "element-plus";

const info = reactive({
  tokenId: null,
  metadata: null,
  order:null
});

const route = useRoute();
const store = useStore();

onMounted(async () => {
  info.tokenId = route.params.tokenId;
  info.metadata = await getMetadata(info.tokenId);
  info.order = await getOrder(info.tokenId)
});

const handleApprove = async ()=>{
  await approve(market_address,info.order.price)
  ElMessage.info("请等待区块链确认。。")
}


const handleBuy = async () => {
  const res = await buy(info.tokenId)
  console.log(res)
};


const change = async ()=>{
  // 改价操作

}


</script>
<template>
  <connect-wallet v-if="!store.wallet.connected"/>
  <div v-if="info.order && store.wallet.connected">
    <div class="nft-detail">
      <el-image class="nft-image" :src="info.metadata.imageURL" :alt="info.metadata.title" />
      <div class="nft-info">
        <h3 class="nft-title">{{ info.metadata.title }}</h3>
        <div style="">
          <div style="margin-top: 20px;font-size: 18px;font-weight: bold">
            Description:
          </div>
          <div style="margin-bottom: 15px;font-size: 15px;color: grey;margin-left: 50px">
            {{ info.metadata.description }}
          </div>
          <div class="nft-details">
            <div style="font-size: 18px;font-weight: bold">
              Seller:
            </div>
            <div style="margin-bottom: 15px;font-size: 15px;color: grey;margin-left: 50px">{{ info.order.seller }}</div>
            <div style="font-size: 18px;font-weight: bold">
              Price:
            </div>
            <div style="margin-bottom: 15px;font-size: 15px;color: grey;margin-left: 50px">{{ info.order.price }} CUSDT</div>
            <div style="font-size: 18px;font-weight: bold">
              TokenId:
            </div>
            <div style="margin-bottom: 15px;font-size: 15px;color: grey;margin-left: 50px">{{ info.tokenId }}</div>
          </div>
        </div>
        <div style="text-align: center">
          <el-button class="nft-button" type="primary" @click="handleApprove">Approve</el-button>
          <el-button class="nft-button" type="success" @click="handleBuy">Buy</el-button>
          <el-button v-if="!(info.order.seller - store.wallet.address)" class="nft-button" type="warning" @click="change">change price</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.nft-detail {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 20px;
  background: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nft-image {
  flex: 1;
  border-radius: 8px;
}

.nft-image {
  flex: 1;
  border-radius: 8px;
}

.nft-info {
  flex: 1;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nft-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.nft-description {
  margin-bottom: 20px;
}

.nft-details {
  margin-bottom: 20px;
}

.nft-text {
  margin-bottom: 5px;
}

.nft-button {
  align-self: flex-start;
  width: 150px;
}
</style>
